<template>
  <div id="app">
    <h1>App4Excel</h1>
    <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile" :on-success="handleSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        大文件的断点续传将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- PROGRESS -->
    <div class="progress">
      <span>上传进度：{{total|totalText}}%</span>
      <el-link type="primary" v-if="total>0 && total<100" @click="handleBtn">{{btn|btnText}}</el-link>
    </div>

    <!-- VIDEO -->
    <div class="uploadImg" v-if="video">
      <video :src="video" controls />
    </div>
  </div>
</template>

<script>
import { fileParse } from "../utils/index";
import axios from "axios";
import SparkMD5 from "spark-md5";
import xlsx from "xlsx"
import {readFile,character} from "../utils/index"
console.log("readFile",readFile)
export default {
  name: "App",
  data() {
    return {
      total: 0,
      video: null,
      btn: false,//false显示暂停     true显示继续
      abort :false
    };
  },
  filters: {
    btnText(btn) {//这个是过滤器filters
      return btn ? "继续" : "暂停";
    },
    totalText(total) {
      return total > 100 ? 100 : total;
    },
  },
  methods: {
    handleSuccess(){
      console.log(1)
    },
    async changeFile(file) {
      // file是文件的事件对象, file.raw是文件的信息
      console.log('file',file)
      if (!file) return;
      file = file.raw;
      console.log('file→',file)
      let data=await readFile(file)//文件转为二进制数据
      console.log("data→",data)
      let workBook=xlsx.read(data,{type:"binary"})//通过xlsx的插件去解析二进制数据,注意xlsx.read这个方法参数一是你读取出来的二进制数据,第二个参数是你的二进制数据的类型一定要配置这一项不然会报错
      console.log("workBook→",workBook)
      let workSheet=workBook.Sheets[workBook.SheetNames[0]]
      let result=xlsx.utils.sheet_to_json(workSheet)
      console.log("最终打印出来的json数据result→",result) //  属性名可能是中文的
      // //{姓名: "张亿", 性别: "男", 年龄: 22, 爱好: "女", 电话: 13117971320, …}
      let arr=[]
      result.forEach(item=>{
        let obj={}
        for(let key in character){//循环character对象,
        // 我们为什么还要用!character.hasOwnProperty(key)去判断一下呢？
        // 因为for in循环是会遍历出character对象原型的属性的,我们不需要原型属性考虑到严谨性用到!character.hasOwnProperty(key)这个api去判断如果非对象自身的属性而是原型上的属性就停止,hasOwnProperty(key)这个api是用来判断是否是对象自身的属性的
          if(!character.hasOwnProperty(key)) break;
          let v=character[key]//拿到name属性的对象
          let text=v.text//拿到name属性对象的text姓名
          let type=v.type//拿到name属性对象的type类型
          v=item[text]||"";//如果拿到result下对应text的属性值
          type=="String"?(v=String(v)):null;
          type=="Number"?(v=Number(v)):null;
          obj[key]=v
        }
        arr.push(obj)
      })
      console.log("json数据转化后的结果！→",arr)
    },
  },
};
</script>